<template>
	<div>
		<div class="title">单词本</div>
		<div class="content">
			<div class="content-left">
				<div>
					<div class="option_btn" :class="'1' == state.paperType?'option_btn_active':''"
						@click="selectPaperType('1')">
						听力错题
					</div>
					<div class="option_btn" :class="'2' == state.paperType?'option_btn_active':''"
						@click="selectPaperType('2')">阅读错题
					</div>
				</div>
				<div class="operate">
					<div class="option_btn" :class="'' == state.examType?'option_btn_active':''"
						@click="clickStatus({value:''})">
						全部
					</div>
					<template v-for="item in state.examTypeList">
						<div class="option_btn" :class="item.value == state.examType?'option_btn_active':''"
							@click="clickStatus(item)">
							{{item.text}}
						</div>
					</template>
				</div>

				<div class="list">
					<el-table :data="state.wordBookList" style="width: 100%">
						<el-table-column type="index" label="序号" width="60" />
						<el-table-column prop="paperId_dictText" label="题目">
							<template #default="{ row, column, $index }">
								<div style="display: flex; align-items: center">
									{{row.paperId_dictText}} {{row.sectionId_dictText}} {{row.examNo}}
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="examType" label="题型" align="center" width="100">
							<template #default="{ row, column, $index }">
								<div>
									{{getDictText(row.examType)}}
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="status" label="状态" align="center" width="100">
							<template #default="{ row, column, $index }">
								<div>
									{{row.status == 1 ? '待复习' : '已复习'}}
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="remark" label="备注" />
						<el-table-column label="操作" width="180" align="center">
							<template #default="{ row, column, $index }">
								<div style="display: flex; align-items: center">
									<el-button type="danger" link @click="handleView(row)">查看解析</el-button>
									<el-button type="danger" link @click="handleOpen(row)">编辑</el-button>
									<el-button type="danger" link @click="del(row.id)">删除</el-button>
								</div>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="pagination-box">
					<el-pagination :page-size="state.pageSize" :total="state.total" :hide-on-single-page="true"
						@currentChange="currentChange"></el-pagination>
				</div>
			</div>
		</div>
		<el-dialog v-model="state.dialogVisible" title="" width="400px" center :before-close="handleClose">
			<div class="dialog-content">
				<el-form ref="ruleFormRef" :model="form" label-width="120px" label-position="top">
					<el-form-item label="备注/说明：">
						<el-input v-model="form.remark" type="textarea" rows="10" />
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="state.dialogVisible = false">取消</el-button>
					<el-button type="danger" @click="editBook">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import {
		onMounted,
		reactive,
		getCurrentInstance
	} from 'vue'
	import {
		useRouter,
		useRoute
	} from 'vue-router';

	const {
		proxy
	} = getCurrentInstance()
	const router = useRouter()
	const route = useRoute()


	const state = reactive({
		dialogVisible: false,
		wordBookList: [],
		total: 0,
		pageNo: 1,
		pageSize: 10,
		status: '',
		column: 'createTime',
		order: 'desc',
		examTypeList: [],
		examType: '',
		paperType: '1'
	})
	const form = reactive({
		id: '',
		status: '2',
		remark: '',
	})

	onMounted(() => {})

	function handleView(row) {
		console.log(row)
		if (row.paperType == 1) {
			let query = {
				id: row.paperId,
				// paperIndex:index
			}
			router.push({
				path: '/home/ListeningPractice',
				query
			})
		} else {
			let query = {
				id: row.paperId,
				// paperIndex: paperIndex
			}

			router.push({
				path: '/home/ReadTest',
				query
			})
		}
	}

	function selectPaperType(paperType) {
		state.paperType = paperType;
		state.examType = ''
		state.pageNo = 1
		getExamTypeList();
		getErrorBookList()
	}

	function clickStatus(item) {
		state.examType = item.value;
		state.pageNo = 1
		getErrorBookList()
	}

	function getDictText(value) {
		let text = ''
		state.examTypeList.forEach((item) => {
			if (item.value == value) {
				text = item.text
			}
		})
		return text
	}

	function sortList(column) {
		state.column = column
		state.order = state.order == 'desc' ? 'asc' : 'desc';
		getErrorBookList()
	}

	function currentChange(e) {
		state.pageNo = e
		getErrorBookList()
	}

	function handleOpen(item) {
		state.dialogVisible = true;
		form.id = item.id;
		form.remark = item.remark;
	}

	function editBook() {

		if (!form.remark) {
			ElMessage({
				message: '请输入备注!',
				type: 'error'
			})
			return;
		}

		proxy.$http.post('/boot/user/errorBook/edit', form).then(res => {
			if (res.data.success) {
				ElMessage({
					message: '保存成功!',
					type: 'success',
				})
				state.dialogVisible = false;
				getErrorBookList();
			}
		})
	}

	function handleClose() {
		state.dialogVisible = false;
	}


	function del(id) {
		ElMessageBox.confirm(
				'您确认要删除该错题吗?',
				'提示', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning',
				}
			)
			.then(() => {
				proxy.$http.delete('/boot/user/errorBook/delete?id=' + id).then(res => {
					if (res.data.success) {
						ElMessage({
							message: '删除成功!',
							type: 'success',
						})

						getErrorBookList();
					}
				})
			})
			.catch(() => {})

	}

	function getErrorBookList() {
		proxy.$http.get('/boot/user/errorBook/list?pageNo=' + state.pageNo + '&pageSize=' + state.pageSize + '&status=' +
			state.status + '&column=' + state.column + '&order=' + state.order + '&examType=' + state.examType +
			'&paperType=' + state.paperType).then(res => {
			if (res.data.success) {
				state.wordBookList = res.data.result.records
				if (res.data.result.records.length > 0) {
					state.word = res.data.result.records[0];
					state.selectId = state.word.id
				}
				state.total = res.data.result.total;
			}
		})
	}

	function getExamTypeList() {
		let url = '/boot/api/comm/dict/getDictItems/listening_exam_type';
		if (state.paperType == '2') {
			url = '/boot/api/comm/dict/getDictItems/reading_exam_type';
		}
		proxy.$http.get(url).then(res => {
			if (res.data.success) {
				console.log(res.data.result)
				state.examTypeList = res.data.result[0].dictList
				getErrorBookList()
			}
		})
	}

	getExamTypeList()
</script>

<style lang="less">
	.title {
		font-family: SourceHanSansCN-Medium;
		font-size: 16px;
		color: #333333;
	}

	.content {
		width: 100%;
		min-height: 600px;
		margin: 10px 0;
		border-radius: 10px;
		padding: 20px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.option_btn {
			text-align: center;
			border: 1px solid #E6ECF2;
			width: 80px;
			height: 34px;
			line-height: 34px;
			margin-right: 0px;
			padding: 0px 0px;
			background-color: #FFFFFF;
			color: #24272B;
			font-size: 14px;
			display: inline-block;
			cursor: pointer;
			min-width: 60px;
			text-align: center;
			margin: 0px -1px -1px 0px;
		}

		.option_btn_active {
			border-radius: 0px;
			background-color: #FFEFEE;
			color: #FF4B40;
		}

		.content-left {
			width: 100%;
			padding-right: 20px;
			display: flex;
			flex-direction: column;
			position: relative;

			.operate {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 10px 0;

				.operate-left {
					display: flex;
					flex-direction: row;
					align-items: center;

					.botton {
						cursor: pointer;
						margin-left: 10px;
						display: flex;
						flex-direction: row;
						align-items: center;
					}
				}
			}

			.tip-box {
				padding: 10px 0;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}

			.list {
				margin: 10px 0;
				//height: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				.word-item {
					border: 1px solid #E6ECF2;
					background-color: #FFFFFF;
					color: #24272B;
					font-size: 14px;
					cursor: pointer;
					margin: 0px -1px -1px 0px;
					width: 197px;
					min-height: 50px;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					padding: 10px;
				}

				.word-item-active {
					border-radius: 0px;
					background-color: #FFEFEE;
					color: #FF4B40;
				}
			}

			.pagination-box {
				padding: 20px 0;
				width: 100%;
				display: flex;
				justify-content: center;
			}
		}

		.content-right {

			.top {
				display: flex;
				height: 90%;

				.textarea {
					padding: 10px;
					border: 1px solid rgba(235, 235, 235, 1);
				}

				.textarea:focus {
					outline: none;
					border: 1px solid rgba(235, 235, 235, 1);
				}
			}

			.button {
				flex-shrink: 1;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-top: 20px;
			}
		}

		input[type='checkbox'] {
			height: auto !important;
		}

	}
</style>